← Home

Cosmos

A website style guide for cosmos.so, the place to find, save and organize visual inspiration.

Assignment 1, Web Basics.
I chose Cosmos because it is where designers build a point of view, which is the audience I want for my own portfolio.

1. Intent

Help people find and keep visual inspiration.

The goal is to get visitors to sign up or download the app so they keep building their own collections. Everything else on the site supports that one action.

A collage of saved images from Cosmos

2. Voice

Calm, curious, assured, understated, tasteful.

The site never shouts. The home page headline reads Find your next lamp with character, a quiet invitation and not a sales pitch. The object in the headline changes, which shows how broad the library is without any hype. Labels are short and plain, and the images do most of the talking.

3. Tone

Same voice, adjusted for the job.

Home page hero
Inviting and a little playful. It speaks to you directly ("your next lamp") and gives one clear action: download the app.
Feature section
Plain and instructional. Each feature is a short title and one sentence: "Search by color," "Organize your inspiration," "Hide AI."
Social proof
Confident and quiet. Logos of well-known brands speak for themselves, and curator names invite you to follow people.
Footer and legal
Neutral and functional. Careers, terms, privacy and contact need no personality.

4. Brand

Upscale but approachable. Editorial, like a gallery.

5. Persona

Students, creatives, makers and curious people.

Cosmos speaks to design students, working creatives, people planning a project at home, and brands who want to be seen. I am one of them, a design student who wants to see how professionals think about references, so I start from myself.

Me, the student researcher: I need good references quickly, I want to sort them by project, and I want to see what current taste looks like before I design my own portfolio.

6. Wireframe

The home page, in boxes.

Desktop layout. Dashed boxes are content areas, in the order they appear on the page.

/ (logo) Explore   Sequence   Shop Log in   Sign up
Find your next [lamp with character]
Download app
Search bar: "Search for lamps"
Image grid
Image grid
Image grid
Search by color
short description
Organize your inspiration
short description
Hide AI
show / blur / hide
Find similar elements
short description
Collaborate together
short description
Save from anywhere
short description
Scrolling row of brand logos (Nike, Aesop, Apple, Pentagram, Gucci, MoMA...)
Curators to follow: name, @handle, Follow button
Sign up   Log in Follow us: Sequence, Instagram, TikTok, X Info: Careers, Terms, Privacy, Contact

Image page

What opens when you click any image. The picture stays large on the left, and the actions sit in a narrow column on the right.

← Back ••• More
Large image

Caption: artist, title, year

Saved by 63 others

Collection: name, item count, @owner
Collection: name, item count, @owner
Collection: name, item count, @owner
Profile ▾Save

Explore, where users browse, is a wall of images of different sizes in five columns, as in the collection image above. Sequence and Shop are also linked from the main navigation but are not drawn here.